<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<h2>登录页面</h2>
<form action="/loginServlet" method="post">
  账号<input type="text" name="username"><br>
  密码<input type="password" name="password"><br>
  验证码<input type="text" name="code">
  <!--页面一加载就向checkCodeServlet发送请求-->
  <!-- onclick="changeCheckCode(this);" 表示单击验证码图片，调用js中的 changeCheckCode函数，参数this表示当前img标签对象 -->
  <img src="/checkCodeServlet" alt="验证码" style="cursor: pointer" onclick="changeCheckCode(this);"><br>
  <input type="submit" value="登录">
</form>
<script>
  //1.定义函数更换验证码图片
  function changeCheckCode(obj){//obj=this 表示上述验证码图片的img标签
    // alert(10);
    //2.向后台checkCodeServlet发送请求更换验证码图片
    /*
        TODO:我们发现当我们点击验证码图片的时候，如果请求路径是：
         obj.src="/checkCodeServlet";
         那么并没有向后台发送请求，原因是浏览器认为当前请求和上述img标签的src="/checkCodeServlet" 的请求图片地址
         是同一个，那么浏览器就不会向后台发送请求。我们哟啊让浏览器认为每次执行的地址都是不一样的
         new Date().getTime() 获取当前系统时间的毫秒值
     */
    // console.log(new Date().getTime());
    obj.src="/checkCodeServlet?t="+new Date().getTime();
  }
</script>
</body>
</html>